<template>
    <div class="home">
        <div class="logo">
            <img src="../../assets/image/1.jpg" alt="" width="100%" height="100%">

            <router-link class="select" to='/searchCity'>{{city}}</router-link>
        </div>
        
        <CovInfo :news="news"></CovInfo>

        <div class="list">
            <div>
                <router-link to="/area">
                    <img src="../../assets/image/1.png" alt="">
                    <div>风险地区</div>
                </router-link>
            </div>
            <div>
                <router-link to="/heSuan">
                    <img src="../../assets/image/2.png" alt="">
                    <div>核酸检测</div>
                </router-link>

            </div>
            <div>
                <router-link to="/prevention">
                    <img src="../../assets/image/3.png" alt="">
                    <div>防疫物资</div>
                </router-link>
            </div>
            <div>
                <router-link to="/travel">
                    <img src="../../assets/image/4.png" alt="">
                    <div>出行政策</div>
                </router-link>

            </div>
        </div>

        <!--  数据统计  -->
        <CovNumber :covData="covData"></CovNumber>

        <!-- echarts地图 -->
        <VueEcharts></VueEcharts>

        <!-- 世界地图 -->
        <WorldMap></WorldMap>

        <!-- 轮播 -->
        <VueSwiper></VueSwiper>
    </div>
</template>

<script>
    import CovInfo from './CovInfo/CovInfo'
    import CovNumber from './CovInfo/CovNumber'
    import api from '../../api'
    import VueEcharts from './VueEcharts/index'
    import WorldMap from './VueEcharts/WorldMap'
    import VueSwiper from '../VueSwiper/index'

    export default {
        name: "home",
        components: {
            CovInfo,
            CovNumber,
            VueEcharts,
            WorldMap,
            VueSwiper
        },
        data() {
            return {
                news: [],
                covData: {},
                city: '国内疫情'
            }
        },

        //  解决$on多次触发bug
        destroyed() {
            this.$bus.$off('getCityName');
        },

        async created() {
            /* let city = window.localStorage.getItem('city');
            if(city) {
                this.city = city+'疫情';
            } */

            // 使用总线形式
            this.$bus.$on('getCityName',name => {
                console.log(name);
                this.city = name + '疫情';
            });

            const res = await api.getCovInfo();
            if(res.status === 200) {
                let data = res.data.newslist[0];
                this.news = data.news;

                // 全国疫情数据的统计
                this.covData= {
                    currentConfirmedCount: data.desc.currentConfirmedCount,
                    confirmedCount: data.desc.confirmedCount,
                    suspectedCount: data.desc.suspectedCount,
                    curedCount: data.desc.curedCount,
                    deadCount: data.desc.deadCount,
                    seriousCount: data.desc.seriousCount,
                    confirmedIncr: data.desc.confirmedIncr,
                    curedIncr: data.desc.curedIncr,
                    deadIncr: data.desc.deadIncr,
                    seriousIncr: data.desc.seriousIncr,
                    createTime: data.desc.createTime,
                    currentConfirmedIncr: data.desc.currentConfirmedIncr,
                    suspectedIncr: data.desc.suspectedIncr,
                    modifyTime: data.desc.modifyTime,
                }
            }else {
                console.log('接口错误')
            }
        }
    }
</script>

<style scoped lang="less">
    .logo {
        position: relative;
        .select {
            position: absolute;
            z-index: 99999;
            top:0.2rem;
            right:0.6rem;
            color: #fff;
            border-radius: 8px;
            padding: 0.1rem;
            box-shadow: 0 0 3px 3px rgba(0, 0, 0, .2);
        }
    }
    a{
        color: #000;
        text-decoration: none;
    }
    .list {
        display: flex;
        padding-bottom: 0.2rem;
        > div {
            flex: 1;
            text-align: center;
            color: #666;
            img {
                width: 0.8rem;
                height: 0.8rem;
            }
        }
    }
</style>
